<template>
  <div>
    <PostShowModeButton></PostShowModeButton>
    <PostShowPreviewButton></PostShowPreviewButton>
    <ChooseTabs @choose="handleTabChoose" v-model:tab="tab" :tabs="tabs"></ChooseTabs>
    <div>
      <div v-if="list.length">
        <PostList v-if="postShowMode==='list'" :list="list" :item-count="pagination.itemCount"
                  @handleMore="handleMorePost"></PostList>
        <PostGrid v-if="postShowMode==='grid'" :list="list" :item-count="pagination.itemCount"
                  @handleMore="handleMorePost"></PostGrid>
      </div>
      <n-empty class="p-10" v-else description="你什么也找不到">
        <template #extra>
        </template>
      </n-empty>
    </div>

  </div>
</template>

<script setup lang="ts">
import ChooseTabs from "@/components/pc/tabs/ChooseTabs.vue";
import PostList from "@/components/pc/list/PostList.vue";
import {onMounted, reactive, ref} from "vue";
import api from "@/api";
import PostShowModeButton from "@/components/pc/button/PostShowModeButton.vue";
import {storeToRefs} from "pinia";
import {useAppStore} from "@/store";
import PostGrid from "@/components/pc/grid/PostGrid.vue";
import PostShowPreviewButton from "@/components/pc/button/PostShowPreviewButton.vue";

const tabs = ref(['最近更新', '最新发布', '最多评论', '最多浏览'])
const tab = ref('最近更新')
const list = ref<IPost[]>([])


const {postShowMode} = storeToRefs(useAppStore())

const pagination = reactive(
    {
      pageSize: 10,
      pageNo: 1,
      itemCount: 0,
    })
const orderParams = ref({
  createdAt: '降序',
  updatedAt: '',
  comments: '',
  views: ''
})
const andParams = ref({
  visibility: 'public',
  categoryName: ''
})
onMounted(() => {
  getPostList()
  getCategoryList()
})

const handleTabChoose = () => {
  andParams.value.categoryName = ''
  if (tab.value === '最近更新') {
    setOrderParams([{updatedAt: '降序'}])
  } else if (tab.value === '最新发布') {
    setOrderParams([{createdAt: '降序'}])
  } else if (tab.value === '最多评论') {
    setOrderParams([{comments: '降序'}])
  } else if (tab.value === '最多浏览') {
    setOrderParams([{views: '降序'}])
  } else {
    andParams.value.categoryName = tab.value
    setOrderParams()
  }
  handleNewPost()
}

const handleMorePost = () => {
  pagination.pageNo++
  getPostList()
}
const handleNewPost = () => {
  list.value = []
  pagination.pageNo = 1
  getPostList()
}
const setOrderParams = (arr: Array<any> = []) => {
  Object.keys(orderParams.value).forEach((key: string) => {
    orderParams.value[key as keyof typeof orderParams.value] = ''
  })
  arr.forEach(item => {
    Object.keys(item).forEach((key: string) => {
      orderParams.value[key as keyof typeof orderParams.value] = item[key]
    })
  })
}


const getPostList = () => {
  window.$loadingBar.start()
  api.post.queryList({
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    andParams: JSON.stringify(andParams.value),
    orderParams: JSON.stringify(orderParams.value),
  }).then(res => {
    res.data.data.records.forEach((item: any) => {
      item.tags = item.tags ? JSON.parse(item.tags) : []
    })
    list.value = list.value.concat(res.data.data.records)
    pagination.itemCount = res.data.data.total
  }).finally(() => {
    window.$loadingBar.finish()
  })
}

const getCategoryList = () => {
  api.category.queryList({
    pageNo: 1,
    pageSize: 10,
  }).then(res => {
    let list = res.data.data.records as []
    list.forEach((item: any) => {
      tabs.value.push(item.name)
    })
  })
}


</script>

<style scoped>

</style>